JavaScript (JS) হল একটি শক্তিশালী প্রোগ্রামিং ভাষা, যা ওয়েব পেজে ইন্টারঅ্যাকটিভ ফিচার এবং ডাইনামিক কনটেন্ট তৈরি করতে ব্যবহৃত হয়। JavaScript ওয়েব পেজের উপাদান যেমন টেক্সট, ইমেজ, বাটন ইত্যাদি নিয়ন্ত্রণ করে এবং ইউজার ইন্টারঅ্যাকশনের ভিত্তিতে ওয়েব পেজের কনটেন্ট পরিবর্তন করতে সক্ষম। JavaScript ওয়েব ডেভেলপমেন্টে গুরুত্বপূর্ণ ভূমিকা পালন করে এবং এটি ফ্রন্টএন্ড ও ব্যাকএন্ড ডেভেলপমেন্টের জন্য ব্যবহৃত হয়।

এই টিউটোরিয়ালে আমরা কিছু গুরুত্বপূর্ণ JavaScript উদাহরণ আলোচনা করব, যা আপনাকে JavaScript শেখার প্রাথমিক ধারণা দিবে এবং বিভিন্ন কার্যকলাপ পরিচালনা করতে সহায়তা করবে।

1. ভেরিয়েবল ডিক্লেয়ারেশন (Variable Declaration)

JavaScript-এ ভেরিয়েবল ডিক্লেয়ার করার জন্য let, const, এবং var ব্যবহার করা হয়। নিচে এর ব্যবহারের উদাহরণ দেওয়া হলো:

let name = 'John';  // let ব্যবহার করে ভেরিয়েবল ঘোষণা
const age = 30;     // const ব্যবহার করে কনস্ট্যান্ট ঘোষণা

name = 'Doe';  // let ভেরিয়েবলটি পুনরায় মান পরিবর্তন করা যায়

console.log(name);  // আউটপুট: Doe
console.log(age);   // আউটপুট: 30

ব্যাখ্যা:

• let: পরিবর্তনশীল (mutable) ভেরিয়েবল তৈরি করতে ব্যবহৃত হয়।
• const: অপরিবর্তনশীল (immutable) ভেরিয়েবল তৈরি করতে ব্যবহৃত হয়।

2. ফাংশন (Functions)

JavaScript-এ ফাংশন ব্যবহার করে কোডের পুনরাবৃত্তি কমানো এবং কোডকে আরও গঠনমূলক করা যায়।

function greet(name) {
  return `Hello, ${name}!`;
}

let message = greet('John');
console.log(message);  // আউটপুট: Hello, John!

ব্যাখ্যা:

• function: ফাংশন ডিফাইন করতে ব্যবহৃত হয়, যেখানে প্যারামিটার নেয় এবং রিটার্ন মান প্রদান করে।

3. কন্ডিশনাল স্টেটমেন্টস (Conditional Statements)

JavaScript-এ শর্তসাপেক্ষ লজিক ব্যবহারের জন্য if-else স্টেটমেন্ট ব্যবহৃত হয়।

let num = 10;

if (num > 5) {
  console.log('Number is greater than 5');
} else {
  console.log('Number is less than or equal to 5');
}

ব্যাখ্যা:

• if-else: একটি শর্ত পরীক্ষা করে এবং সেই শর্ত অনুযায়ী কোড এক্সিকিউট করে।

4. অ্যারেগুলির সাথে কাজ (Arrays)

JavaScript-এ arrays ব্যবহার করে একাধিক ডেটা সংগ্রহ করতে হয় এবং এগুলির উপর কাজ করা যায়।

let fruits = ['Apple', 'Banana', 'Orange'];

console.log(fruits[0]);  // আউটপুট: Apple

fruits.push('Mango');  // নতুন মান যুক্ত করা
console.log(fruits);    // আউটপুট: ['Apple', 'Banana', 'Orange', 'Mango']

ব্যাখ্যা:

• push(): অ্যারেতে নতুন আইটেম যুক্ত করার জন্য ব্যবহৃত হয়।
• অ্যারের মানগুলি সূচক দ্বারা অ্যাক্সেস করা হয়।

5. অবজেক্টস (Objects)

JavaScript-এ অবজেক্ট ব্যবহার করে একটি সংগ্রহ তৈরি করা যায় যা বিভিন্ন ধরনের মান ধারণ করতে পারে।

let person = {
  name: 'John',
  age: 30,
  greet: function() {
    return `Hello, ${this.name}!`;
  }
};

console.log(person.name);  // আউটপুট: John
console.log(person.greet());  // আউটপুট: Hello, John!

ব্যাখ্যা:

• object: একটি অবজেক্টে বিভিন্ন প্রোপার্টি এবং মেথড থাকতে পারে।
• this: অবজেক্টের প্রোপার্টি এবং মেথডে রেফারেন্স করার জন্য ব্যবহৃত হয়।

6. লুপ (Loops)

for, while, এবং forEach লুপ ব্যবহার করে আমরা কোডের কিছু অংশ একাধিকবার চালাতে পারি।

উদাহরণ: for লুপ

for (let i = 0; i < 5; i++) {
  console.log(i);  // আউটপুট: 0 1 2 3 4
}

ব্যাখ্যা:

• for লুপ একটি শর্ত অনুসারে নির্দিষ্ট সংখ্যক বার কোড এক্সিকিউট করে।

উদাহরণ: forEach লুপ (Arrays এর জন্য)

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(num) {
  console.log(num);  // আউটপুট: 1 2 3 4 5
});

ব্যাখ্যা:

• forEach(): এটি একটি অ্যারে বা অবজেক্টের প্রতিটি আইটেমের জন্য ফাংশন চালায়।

7. এরোর হ্যান্ডলিং (Error Handling)

JavaScript-এ try-catch ব্লক ব্যবহার করে ত্রুটি হ্যান্ডলিং করা হয়।

try {
  let result = 10 / 0;  // ত্রুটি হবে না, তবে Infinity রিটার্ন হবে
  console.log(result);
} catch (error) {
  console.log('Error occurred:', error);
}

ব্যাখ্যা:

• try: যে কোডটি পরীক্ষা করা হবে তা এখানে লেখা হয়।
• catch: যদি কোনো ত্রুটি ঘটে, তবে এই ব্লকটি চালানো হবে।

8. DOM ম্যানিপুলেশন (DOM Manipulation)

JavaScript-এ DOM (Document Object Model) ম্যানিপুলেশন ব্যবহার করে HTML উপাদানগুলি পরিবর্তন করা যায়।

document.getElementById('myButton').addEventListener('click', function() {
  alert('Button clicked!');
});

ব্যাখ্যা:

• getElementById(): একটি নির্দিষ্ট ID সহ HTML উপাদান খুঁজে পায়।
• addEventListener(): একটি ইভেন্ট (যেমন click) শোনার জন্য ব্যবহৃত হয় এবং ইভেন্ট হ্যান্ডলার চালায়।

9. এসিঙ্ক্রোনাস কোড এবং প্রমিজ (Asynchronous Code and Promises)

JavaScript-এ asynchronous কোড লেখার জন্য Promises ব্যবহৃত হয়।

let promise = new Promise((resolve, reject) => {
  let success = true;
  
  if (success) {
    resolve('Operation was successful!');
  } else {
    reject('Something went wrong!');
  }
});

promise.then((message) => {
  console.log(message);  // আউটপুট: Operation was successful!
}).catch((message) => {
  console.log(message);  // আউটপুট: Something went wrong!
});

ব্যাখ্যা:

• Promise: একটি অবজেক্ট যা ভবিষ্যতে সফল বা ব্যর্থ হতে পারে, যা resolve বা reject দিয়ে ফলাফল প্রদান করে।

10. এএসও (Arrow Functions)

Arrow functions হল সংক্ষিপ্ত ফাংশন ঘোষণার একটি পদ্ধতি।

const sum = (a, b) => a + b;
console.log(sum(5, 3));  // আউটপুট: 8

ব্যাখ্যা:

• =>: এটি arrow function এর সিনট্যাক্স, যা ফাংশন ডিক্লেয়ার করার একটি সহজ উপায়।

সারাংশ

JavaScript একটি অত্যন্ত শক্তিশালী এবং গুরুত্বপূর্ণ প্রোগ্রামিং ভাষা, যা ওয়েব পেজের ইন্টারঅ্যাকটিভ ফিচার তৈরিতে ব্যবহৃত হয়। উপরের উদাহরণগুলিতে আমরা JavaScript এর বিভিন্ন ফিচার এবং প্রপার্টির মাধ্যমে ওয়েব ডেভেলপমেন্টের জন্য কিছু সাধারণ কৌশল দেখেছি। JavaScript শিখলে আপনি ওয়েব পেজে ডাইনামিক কনটেন্ট, ইন্টারঅ্যাকটিভ ইভেন্ট, ইউজার ইন্টারফেস পরিবর্তন এবং আরও অনেক কিছু করতে পারবেন।